<!DOCTYPE HTML>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="commons/header :: #head(title='首页')"></head>
<style>
	td,th{
        text-align: center !important;
    }
	a{
		cursor: pointer;
	}
	input{
		text-align: center;
	}

</style>
<script type="text/javascript" th:inline="javascript">
	function toUpdate(obj,id) {
        var tr = $(obj).parents("tr");
	    if ($(obj).text() == "更新"){
            toUpdateMenu(id,tr.find("input[type='text']").val(),tr.find("select").val());
	        return;
		}
	    $(obj).text("更新");

        tr.find("input[type='text']").show();
        tr.find("input[type='text']").prev().hide();
        tr.find("input[type='text']").next().show();

		if (tr.find(".parentName").next().length >0){
            tr.find(".parentName").next().show();
		    return;
		}
		$.ajax({
            url: /*[[@{/menu/menu}]]*/,
            async: false,
            type: "get",
            success: function (retult) {
                if (retult.status == 200){
                    var str ="<select style='padding:0px;margin: 0px;' class='parent'>";
                    $.each(retult.data,function (index,items) {
                        if (tr.find(".parentName").text() == items.name){
                            str += "<option value="+items.id+" selected>"+items.name+"</option>";
                            retult;
                        }
                        str += "<option value="+items.id+">"+items.name+"</option>";
                    })
                    str +="</select>";
                    tr.find(".parentName").after($(str));
                }else {

                }
            }
        });
    }

    //异步更新
	function toUpdateMenu(id,val,parentId) {
	    $("[name='id']").val(id);
        $("[name='parentId']").val(parentId);
        $("[name='name']").val(val);
        $("#form").submit();
    }
    
    function cancel(obj) {
        var tr = $(obj).parents("tr");
        tr.find(".parent").hide();
        tr.find(".toUpdate").text("修改");
	    $(obj).hide();
        $(obj).prev().hide();
        $(obj).prev().prev().show();

    }

    //删除子级菜单
	function deleteMenu(obj,id) {
		$.post(/*[[@{/menu/menu}]]*/,
			{"_method":"delete","id":id},
			function (result) {
		    	if (result.status == 200){
		    	    $(obj).parents("tr").remove();
				} else {
		    	    alert("意料之外的错误！")
				}
            }
		);
    }

    //添加子级菜单
    function addSubMenu() {

    }
    //下一页
    function nextPage(){
	    var page = $("#page").html();
	    var totalPage = $("#totalPage").html();
	    page = parseInt(page)+1;
	    if(page>totalPage){
	        page = totalPage;
	        return;
        }
        $("#page").html(page);
        var articleTitle = null;
        $.post(/*[[@{/article/queryArticleByTiaoJian}]]*/,{'page':page,'articleTitle':articleTitle},function (result) {
            var list = result.data;
            var beginHtml = " <thead>" +
                "<tr>" +
                "<th>文章标题</th>" +
                "<th>创建时间</th>" +
                "<th>创建人</th>" +
                "<th>发布状态</th>" +
                "<th>操作</th>" +
                "</tr>" +
                "</thead><tbody>";
            var lastHtml = "</tbody>";
            var inHtml = "";
            $.each(list,function (index,items) {
                inHtml +=
                    "<tr>" +
                    "<td> " +
                    "    <span>"+items.articletitle+"</span> " +
                    "</td> " +
                    "<td>"+items.createDate+"</td> " +
                    "<td> " +
                    "    <span>"+items.username+"</span> " +
                    "</td> " +
                    "<td> " +
                    "    <span>"+items.username+"</span> " +
                    "</td> " +
                    "<td> " +
                    "    <a href=\"javascript:void(0);\" onclick=\"toUpdateArticle("+items.articleId+")\">编辑</a> " +
                    "    <a href=\"javascript:void(0);\" >删除</a> " +
                    "</td> " +
                    "</tr> " ;
            });
            var html = beginHtml+inHtml+lastHtml;
            $("#table").html(html);
        });
	}
	//修改文章
    function toUpdateArticle(aid) {
        location.href = "/article/toUpdateArticle?aid=" + aid;
    }
    //上一页
    function prePage() {
	    var page = $("#page").html();
	    page = page - 1 ;
	    if(page<1){
	        page = 1;
	        $("#page").html(page);
	        return;
        }
        $("#page").html(page);
        var articleTitle = null;
        $.post(/*[[@{/article/queryArticleByTiaoJian}]]*/,{'page':page,'articleTitle':articleTitle},function (result) {
            var list = result.data;
            var beginHtml = " <thead>" +
                "<tr>" +
                "<th>文章标题</th>" +
                "<th>创建时间</th>" +
                "<th>创建人</th>" +
                "<th>发布状态</th>" +
                "<th>操作</th>" +
                "</tr>" +
                "</thead><tbody>";
            var lastHtml = "</tbody>";
            var inHtml = "";
            $.each(list,function (index,items) {
                inHtml +=
                    "<tr>" +
                    "<td> " +
                    "    <span>"+items.articletitle+"</span> " +
                    "</td> " +
                    "<td>"+items.createDate+"</td> " +
                    "<td> " +
                    "    <span>"+items.username+"</span> " +
                    "</td> " +
                    "<td> " +
                    "    <span>"+items.username+"</span> " +
                    "</td> " +
                    "<td> " +
                    "    <a href=\"javascript:void(0);\" onclick=\"toUpdateArticle("+items.articleId+")\">编辑</a> " +
                    "    <a href=\"javascript:void(0);\" >删除</a> " +
                    "</td> " +
                    "</tr> " ;
            });
            var html = beginHtml+inHtml+lastHtml;
            $("#table").html(html);
        });
    }
</script>
<body>
   <div class="page-container">
   <!--/content-inner-->
<div class="col-md-10" style="padding: 0px">
	   <div class="mother-grid-inner">

	<div class="agile3-grids">

        <!-- tables -->

        <div class="agile-tables">
            <div class="w3l-table-info">
                <h2 style="float: left;">菜单管理</h2>
                <span style="float: right;margin-top: 13px;padding: 7px 10px;background-color: orange;color: white;cursor: pointer" onclick="addSubMenu()">添加</span>
                <table id="table">
                    <thead>
                    <tr>
                        <th>文章标题</th>
                        <th>创建时间</th>
                        <th>创建人</th>
                        <th>发布状态</th>
                        <th>操作</th>
                    </tr>
                    </thead>

                    <tbody>
                    <tr th:each="articleitems : ${articleList}">
                        <td>
                            <span th:text="${articleitems.articletitle}"></span>
                        </td>
                        <td th:text="${articleitems.createDate}"></td>
                        <td>
                            <span th:text="${articleitems.username}" class="parentName"></span>
                        </td>
                        <td>
                            <span th:text="${articleitems.username}" class="parentName"></span>
                        </td>
                        <td>
                            <a href="javascript:void(0);" th:onclick="toUpdateArticle([[${articleitems.articleId}]])">编辑</a>
                            <a href="javascript:void(0);" >删除</a>
                        </td>
                    </tr>
                    </tbody>
                </table>
                <span>
                    <a href="javascript:void(0)" id="prePage" onclick="prePage()">上一页</a><span id="page">1</span><span>/</span><span id="totalPage" th:text="${totalPage}"></span><a id="nextPage" href="javascript:void(0)" onclick="nextPage()">下一页</a>
                </span>
            </div>

        </div>
        <!-- //tables -->
        <form action="" id="form" th:action="@{/menu/menu}" method="post">
            <input type="hidden" name="_method" value="put"/>
            <input type="hidden" name="id" value=""/>
            <input type="hidden" name="parentId" value=""/>
            <input type="hidden" name="name" value=""/>
        </form>
	</div>
<!-- script-for sticky-nav -->

		<!-- /script-for sticky-nav -->
<!--inner block start here-->
<div class="inner-block">
    <select th:onchange="queryMenu(this)" style="padding: 5px 20px;margin-top: -10px;margin-bottom: 20px;" class="parent">
        <option value="-1">--请选择--</option>
        <!--<option th:each="items,status : ${menuList}" th:if="${#lists.size(menuList.get(status.index).menuList)}" th:value="${items.id}" th:text="${items.name}"></option>-->
    </select>
</div>
<!--inner block end here-->
</div>
</div>
  <!--//content-inner-->
		<!--/sidebar-menu-->
	   <!--左侧菜单栏-->
							  <div class="clearfix"></div>		
							</div>
							<script>
							var toggle = true;
										
							$(".sidebar-icon").click(function() {                
							  if (toggle)
							  {
								$(".page-container").addClass("sidebar-collapsed").removeClass("sidebar-collapsed-back");
								$("#menu span").css({"position":"absolute"});
							  }
							  else
							  {
								$(".page-container").removeClass("sidebar-collapsed").addClass("sidebar-collapsed-back");
								setTimeout(function() {
								  $("#menu span").css({"position":"relative"});
								}, 400);
							  }
											
											toggle = !toggle;
										});
							</script>
<!--js -->
<script src="js/jquery.nicescroll.js"></script>
<script src="js/scripts.js"></script>
<!-- Bootstrap Core JavaScript -->
   <script src="js/bootstrap.min.js"></script>
   <!-- /Bootstrap Core JavaScript -->	   

</body>
</html>